<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/style.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/swiper.min.css">
		<link rel="stylesheet" href="../../css/Animate.css">

		<link rel="stylesheet" href="../../css/Animate.css">
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<link rel="stylesheet" href="../../css/cs.css">
		<style>
			.mui-col-sm-l2{width:20%;}
			.mui-col-sm-l2:nth-of-type(1){margin-bottom: 0.7rem;}
			.mui-col-sm-l2:nth-of-type(2){margin-bottom: 0.7rem;}
			.mui-col-sm-l2:nth-of-type(3){margin-bottom: 0.7rem;}
			.mui-col-sm-l2:nth-of-type(4){margin-bottom: 0.7rem;}
			.mui-col-sm-l2:nth-of-type(5){margin-bottom: 0.7rem;}
			.mui-search input[type=search]{
				margin-bottom: 0;
			}
			.mui-search:before{
				top:1.5rem;
			}
			.mui-icon-chat:before{
				line-height: 2.6rem;
			}
			.mui-table-view{
				border:none;
			}
			.mui-table-view:before{
				background-color: none;
			}
			.swiper-container {
			  width: 100%;
			  background:white;
			  padding: 0 5px;
			}
			.swiper-slide {
			  text-align: left;
			  display: flex;
			  align-items: center;
			}
			.sw_jq{
				width:95%;
				margin:0 auto;
				border-top:1px solid black;
			}
			img{
				width:100%;
				background-size:100% 100%;
			}
			#header{
				position: fixed;
				top:0;
				z-index: 9999;
			}
			.home-row{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				font-size: 0.7rem;
				color:#8A8A8A;
				text-align: center;
				padding:1rem 0.5rem;
				background:white;
			}
			.mui-col-sm-l2 img{
				width:3rem;
			}
			.contauner1{
				display: flex;
				align-items: center;
				height: 35px;
				background: #f4f4f4;
				padding: 0 15px;
				font-size: 1rem;
				color: #333;
			}
			.sbt {
				color: #fff;
				margin-top: 10px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				line-height: 20px;
				background: #3ca582;
				padding: 4px;
			}
			.price{
				color:#343434;
				padding: 5px 10px;
			}
			.img-c-box{
				width:100%;
				height: 10.5rem;
				position:relative;
				text-align: center;
			}
			.sbt_info{
				width:100%;
				position: absolute;
				bottom:0;
				/* background: rgba(0,0,0,0.5); */
				background: #3ca582;
				height: 2rem;
				line-height: 2rem;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom: 0;
				color:#fff;
				padding:0.1rem 0.2rem;
			}
			.img-c-box img{
				width:100%;
				height:8rem;
				display: inline-block;
			}
			.tj-smbox{
				width:100%;
				box-shadow: 2px 0px 10px #ccc;
			}
			
			
			/* 设置mui-slide 图片大小 */
			.mui-slider{
				width:100vw;
				height:50vw;
			}
		</style>
	</head>

	<body>
		<div class="home-content" id="app">
			<com-citychoice ref="city" v-on:tochildevent='cityjs'></com-citychoice>
			<!--头部搜索-->
			<header class="home-header" id="header">
				<input type="text" class="cityInput" v-model.trim='cityInputVal' v-on:click='cityPatFun' style="width: 25%;height: 34px;margin-top: 4px;border:none;background:none;color:white;" />
				<span style="width: 0px;height: 0px;border-width: 8px;border-style: solid;border-color: white transparent transparent;position: absolute;left: 23%;top: 45%;"></span>
				<div class="mui-input-row mui-search" style="width: 65%;">
					<input type="search" class="mui-input-clear" placeholder="" style="background: white;">
				</div>
			</header>
			<!--幻灯片-->
			<div id="slider" class="mui-slider" style="margin-top:48px;">
				<div class="mui-slider-group mui-slider-loop">
					<div class="mui-slider-item" v-for="o in oIndex.banner">
						<a href="#">
							<img :src="o.ad_code" oneror='this.src="../../images/banner1.jpg"'>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active" v-for="o,i in oIndex.banner" v-if="i==0"></div>
					<div class="mui-indicator" v-for="o,i in oIndex.banner" v-if="i!=0"></div>
				</div>
			</div>
			<!--最新消息-->
			<div class="swiper-container contauner1">
				<div style="width:7rem;color:red;">
					<span class="mui-icon iconfont icon-yinlianglabashengyin-xianxing"></span>&nbsp;&nbsp;最新消息：
				</div>
				<div class="swiper-wrapper" style="width:calc(100% - 7rem);color:red;">
					<div class="swiper-slide stop-swiping">某某某新豆腐干5.5/袋</div>
					<div class="swiper-slide stop-swiping">今日促西红柿1.5/斤</div>
					<div class="swiper-slide stop-swiping">西葫芦今日特价：0.8/斤</div>
				</div>
			</div>
			<!--模块-->
			<div class="home-row">
				<div class="mui-col-sm-l2">
					<img src="../../images/tb1.png" alt="">
					<div>蔬菜区</div>
				</div>
				<div class="mui-col-sm-l2">
					<img src="../../images/tb2.png" alt="">
					<div>肉禽蛋类</div>
				</div>
				<div class="mui-col-sm-l2">
					<img src="../../images/tb3.png" alt="">
					<div>水产</div>
				</div>
				<div class="mui-col-sm-l2">
					<img src="../../images/tb4.png" alt="">
					<div>水果区</div>
				</div>
				<div class="mui-col-sm-l2">
					<img src="../../images/tb5.png" alt="">
					<div>粮油产品</div>
				</div>
				<div class="mui-col-sm-l2">
					<img src="../../images/tb6.png" alt="">
					<div>送货上门</div>
				</div>
				<div class="mui-col-sm-l2">
					<img src="../../images/tb7.png" alt="">
					<div>会员专区</div>
				</div>
				<div class="mui-col-sm-l2">
					<img src="../../images/tb11.png" alt="">
					<div>每日签到</div>
				</div>
				<div class="mui-col-sm-l2">
					<img src="../../images/tb9.png" alt="">
					<div>今日天气</div>
				</div>
				<div class="mui-col-sm-l2">
					<img src="../../images/tb10.png" alt="">
					<div>联系我们</div>
				</div>
			</div>
			<!--每日促销-->
			<div class="temai">
				每日促销<img src="../../images/rm.gif">
			</div>
			<!--banner-->
			<div>
				<img src="../../images/ban1.png" alt="">
			</div>
			<div class="swiper-container swiper-container1" id="shop-box">
				<div class="swiper-wrapper">
					<div class="swiper-slide cp" v-for="o,i in oIndex.cuxiao_goods" @click="openGoodsDetails(o.goods_id)">
						<div class="tj-smbox">
							<div class="img-c-box">
								<img :src="o.goods_thumb" onerror='this.src="../../images/error-img.png"' />
								<p class="sbt_info">{{o.goods_name}}</p>
							</div>
							<div class="price">￥<span>{{o.shop_price}}元/{{o.guige}}</span></div>
						</div>
					</div>
				</div>
			</div>

			<!--新品上市-->
			<div class="temai">新品上市</div>
			<div class="juli">
				<div class="cp">
					<div class="k1" v-for="o,i in oIndex.new_goods" @click="openGoodsDetails(o.goods_id)" style="margin-bottom: 0.5rem;">
						<img :src="o.original_img" onerror='this.src="../../images/error-img.png"' class="bfb">
						<p class="sbt">{{o.goods_name}}</p>
						<p class="price">￥<span>{{o.shop_price}}</span>/{{o.guige}}</p>
					</div>
				</div>
			</div>
			<!--多门店-->
			<div class="temai">更多门店</div>
			<div class="stores-box" id="md-box">
				<div class="stores-block-box md" v-for="o,i in oIndex.mendian" @click="openMendian(o.suppliers_id)">
					<div class="stores-one">
						<img :src="o.supp_logo" alt="">
					</div>
					<div class="stores-two">
						<p>{{o.suppliers_name}}</p>
						<p>
							<img src="../../images/dp1.png" alt="">
							<img src="../../images/dp1.png" alt="">
							<img src="../../images/dp1.png" alt="">
							<img src="../../images/dp2.png" alt="">
							<img src="../../images/dp2.png" alt="">
						</p>
						<p class="stores-add-box">
							<p class="mui-ellipsis">{{o.address}}</p>
							<p>3.5km</p>
						</p>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/swiper.min.js"></script>
		<script src="../../js/jquery-3.2.1.min.js"></script>
		<script src="../../js/common/config.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/cityChoice.js"></script>
		<script>
			//mui初始化
			mui.init({
                pullRefresh: {
                    container: '#app',
                    down: {
                        callback: function(){
							setTimeout(function(){
								mui('#app').pullRefresh().endPulldownToRefresh(); 
							},1000);
						}
                    },
					up:{
						contentrefresh: '正在加载...',
						callback: function(){
							setTimeout(function(){
								mui('#app').pullRefresh().endPullupToRefresh(); 
							},1000);
						}
					}
                }
            });


			mui.plusReady(function() {
				var user_id = localStorage.getItem('user_id');
				var token = localStorage.getItem('token');
				// console.log(user_id + "---" + token);
				vm.init(user_id);
			})

			var vm = new Vue({
				el: "#app",
				data: {
					user_id: '',
					cityInputVal: '太原',
					oIndex: {
						banner: [],
						cuxiao_goods: [],
						mendian: []
					}
				},
				methods: {
					init(user_id) {
						this.user_id = user_id;
						// step1:获取首页数据
						this.getIndexData();
					},
					cityPatFun() {
						this.$refs.city.cityFun();
					},
					cityjs(data) {
						this.cityInputVal = data;
					},
					getIndexData() {
						let _that = this;
						mui.ajax(Config.api.Index, {
							data: {
								request_type: 1,
								user_id: _that.user_id,
							},
							type: 'post',
							dataType: 'json',
							success: function(data) {
								_that.oIndex = data;
								setTimeout(function() {
									/*banner轮播自动*/
									var gallery = mui('.mui-slider');
									gallery.slider({
										interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
									});

									/* 今日促销swiper滑动*/
									var swiper = new Swiper('.swiper-container1', {
										slidesPerView: 2.2,
										spaceBetween: 5,
										pagination: {
											el: '.swiper-pagination',
											clickable: true,
										},
									});
								});
							},
							error: function(xhr, type, errorThrown) {
								mui.toast("接口错误");
							}
						})
					},
					openGoodsDetails(goods_id) {
						var url = "./shopping_show.html";
						mui.openWindow({
							url: url,
							id: url,
							styles: {
								top: '0px', //新页面顶部位置
								bottom: '0px', //新页面底部位置
								popGesture: 'close'
							},
							extras: {
								goods_id: goods_id
							},
							waiting: {
								autoShow: false
							}
						})
					},
					openMendian(id) {
						var url = "./stores.html";
						mui.openWindow({
							url: url,
							id: url,
							styles: {
								top: '0px', //新页面顶部位置
								bottom: '0px', //新页面底部位置
								popGesture: 'close'
							},
							extras: {
								id: id
							},
							waiting: {
								autoShow: false
							}
						})
					},
				}
			});


			// 获取经纬度
			function getLocation() {
				if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(function(position) {
						console.log(position.coords.latitude + "---" + position.coords.longitude);
					});
				}
			}
			getLocation();

			/***最新消息轮播***/
			var swiper = new Swiper('.contauner1', {
				direction: 'vertical',
				autoplay: true,
				slidesPerView: 1,
				spaceBetween: 30,
				mousewheel: true,

				//静止拖动
				noSwiping: true,
				noSwipingClass: 'stop-swiping',

				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			});

			// 获取滚动条顶部的距离
			/* document.addEventListener("scroll", function() {
				var t = document.documentElement.scrollTop || document.body.scrollTop;
				if (t > 150) {
					$("#header").css({
						"position": "fixed"
					});
				} else {
					$("#header").css({
						"position": "relative"
					});
				}

			}); */
		</script>
	</body>

</html>
